<!DOCTYPE html>
<html lang="zh">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>我的简历</title>
    <style>
      * {
        box-sizing: border-box
      }

      body {
        background: #eee;
        margin: 20px 0
      }

      article {
        width: 21cm;
        min-height: 29.7cm;
        background: #fff;
        margin: 0 auto;
        overflow: auto;
        padding: 1em
      }

      p {
        margin: .3em 0
      }

      h1 {
        font-size: 25px;
        margin-top: 0
      }

      h4,
      h5,
      h6 {
        font-weight: 400
      }

      ol,
      ul {
        list-style: none;
        padding: 0;
        margin: 0
      }

      strong {
        color: #f60
      }

      a {
        color: #999;
        text-decoration: none;
        border-bottom: 1px solid
      }

      li,
      p {
        color: #666
      }

      strong {
        font-weight: 400
      }

      h3,
      h4,
      h5,
      h6 {
        margin: 0
      }

      .bio {
        position: relative
      }

      .bio img {
        position: absolute;
        top: 0;
        right: 0
      }

      .projects p {
        color: #666
      }

      .projects strong {
        color: #f60
      }

      .projects>ol {
        margin-top: 0;
        list-style-position: inside;
        padding: 0
      }

      .projects>ol>li {
        margin-bottom: 24px
      }

      .projects>ol>li>header {
        display: flex;
        justify-content: space-between
      }

      .projects>ol>li h3 {
        display: inline-block
      }

      #skills {
        width: 500px;
        height: 270px
      }

      @media print {
        #skills {
          display: none
        }
      }

      .skills>.wrapper {
        display: flex;
        justify-content: space-between
      }

      .skills>.wrapper>:first-child {
        margin-right: 24px
      }

      .skills>.wrapper>ul {
        color: #666
      }

      .skills>.wrapper strong {
        color: #f60
      }

      .skills>.wrapper>ul>li {
        line-height: 1.2;
        margin-bottom: 8px
      }

      .openSource header img {
        position: absolute;
        top: 0;
        right: 0
      }

      .openSource>ul>li {
        margin-bottom: 24px
      }

      .openSource header {
        position: relative;
        display: flex;
        justify-content: space-between
      }

      .jobs>ol>li {
        margin: 12px 0
      }

      .jobs header {
        display: flex;
        color: #666;
        margin-bottom: 12px
      }

      .jobs header>h3 {
        font-size: 18px;
        color: #333
      }

      .jobs header>h4 {
        margin-left: 1em;
        font-size: 18px
      }

      .jobs header>span {
        font-size: 18px;
        margin-left: auto
      }

      @media (max-width:500px) {
        body {
          margin: 0
        }

        article {
          width: auto;
          height: auto
        }

        .bio img {
          display: none
        }

        .skills .wrapper {
          flex-direction: column
        }

        #skills {
          width: auto
        }

        .jobs header {
          flex-direction: column
        }

        .jobs header>h3,
        .jobs header>h4,
        .jobs header>span {
          margin: 0
        }
      }

      body {
        margin: 0
      }

      .page2 {
        page-break-before: always;
        margin-top: 30px
      }
    </style>
  </head>

  <body>
    <article>
      <section class="bio">
        <h1>韩志伟</h1>
        <img src="//img10.360buyimg.com/imgzone/jfs/t1/109319/32/16804/2211095/61459dc0E7c7ee816/e0eb34e12c3ae89d.jpg"
             alt=""
             width="100">
        <p> 男 | 23岁 | 前端开发工程师 | 大连 </p>
        <p> 手机：17615180174 | 微信：Duwanyu515 | 邮箱：174184746@qq.com </p>
      </section>
      <section class="projects">
        <h2>工作经历 <span style='font-size: 16px;color:gray'>大连陆泽科技</span></h2>
        <h4> 工作内容简介：负责开发电商平台的互动活动，如转盘抽奖，签到有礼等的活动页面以及活动配置页面。 </h4>
        <br>
        <ol>
          <li>
            <header>
              <h3>超级会员</h3>
            </header>
            <p> 采用技术：<strong>JSP</strong> / <strong>Vue2</strong> / <strong>jquery</strong>。 </p>
            <p> 我负责的：负责部分移动端活动模板，PC端活动设置页的维护和开发。 </p>
          </li>
          <li>
            <header>
              <h3>苏宁超级营销</h3>
            </header>
            <p> 采用技术：<strong>Vue2</strong> / <strong>Vue-router</strong> / <strong>vuex</strong></p>
            <p> 我负责的：负责通过vue-cli搭建工程，以及部分移动端活动模板的开发。 </p>
          </li>
          <li>
            <header>
              <h3>云鹿CRM</h3>
            </header>
            <p> 采用技术：<strong>Vue2</strong> / <strong>Vue-router</strong> / <strong>Element-UI</strong></p>
            <p> 我负责的：负责部分移动端活动模板，PC端活动设置页，以及商城个人中心装修页的维护和开发。 </p>
          </li>
          <li>
            <header>
              <h3>超级无线</h3>
            </header>
            <p> 采用技术：<strong>Vue3</strong> / <strong>TypeScript</strong> / <strong>Vant</strong></p>
            <p> 我负责的：负责部分移动端定制活动的开发与维护。 </p>
          </li>
        </ol>
      </section>
      <section class="skills">
        <h2>技能</h2>
        <div class="wrapper">
          <ul>
            <li>能够使用<strong> Photoshop </strong>进行切图，熟悉蓝湖，阿里iconfont，svn，git等工具的基础使用；</li>
            <li>熟练掌握<strong> HTML </strong>，<strong> CSS </strong>常用属性的使用,了解Animate.css，bootstrap，jquery等框架；</li>
            <li>熟练掌握<strong> JavaScript </strong>，了解<strong> ES6+ </strong>，<strong> TypeScript </strong>常用属性的使用；</li>
            <li>熟练掌握<strong> Vue全家桶 </strong>的使用，包括 Vue2、Vue3、VueRouter、Vuex、Vuepress、axios等；</li>
            <li>熟练掌握<strong> UI组件库 </strong>的使用，包括element-ui，vant，iView等；</li>
            <li>了解<strong> nodejs </strong>，包括express，koa，mongodb，WebSocket，爬虫工具cheerio等。</li>
          </ul>
        </div>
      </section>
      <section class="openSource">
        <h2>开源项目</h2>
        <ul>
          <li>
            <header>
              <h3>流莺书签</h3>
              <span>
                <a href="https://github.com/alanhzw/WarblerHomepage"
                   target="_blank">源码链接</a>
                <a href="http://warbler.duwanyu.com"
                   target="_blank">项目预览</a>
              </span>
            </header>
            <p> 采用技术：<strong>Vue3</strong> / <strong>TypeScript</strong></p>
            <p> 项目简介：用来收藏网址的小项目，包括分组，书签的<strong>增加</strong>，<strong>删除</strong>，<strong>修改</strong>；</p>
            <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              可以<strong>自动抓取</strong>目标网站的title和icon；</p>
            <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              可以通过<strong>拖拽</strong>进行书签的排序；</p>
            <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              可以快速的通过各种搜索引擎进行搜索和百度翻译；</p>
            <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              通过<strong> localstorage </strong>进行数据的存储，并可以进行数据的<strong>下载</strong>和<strong>上传</strong>；</p>
            <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              所有的组件全部<strong>手写</strong>，未使用任何组件库，包括<strong>Dialog</strong>，<strong>Message</strong>，<strong>Form</strong>等。</p>
          </li>
          <li class="page2">
            <header>
              <h3>warlber-js</h3>
              <span>
                <a href="https://github.com/alanhzw/warbler-js"
                   target="_blank">源码链接</a>
                <a href="http://warblerjs.duwanyu.com"
                   target="_blank">项目预览</a>
              </span>
            </header>
            <p> 采用技术：<strong>JavaScript</strong> / <strong>ES6+</strong></p>
            <p>整理了一些 JavaScript 常用的工具函数。</p>
          </li>
          <li>
            <header>
              <h3>warlber-js文档</h3>
              <span> <a href="https://github.com/alanhzw/warblerjs-guide"
                   target="_blank">源码链接</a>
                <a href="http://warblerjs.duwanyu.com"
                   target="_blank">项目预览</a>
              </span>
            </header>
            <p> 采用技术：<strong>Vuepress</strong></p>
            <p> 项目简介：warlber-js 的操作文档。</p>
          </li>
          <li>
            <header>
              <h3>个人主页</h3>
              <span> <a href="#">源码私有</a>
                <a href="https://www.duwanyu.com"
                   target="_blank">项目预览</a>
              </span>
            </header>
            <p> 采用技术：<strong>Vue2全家桶 </strong> / <strong>express</strong> / <strong>mongodb</strong></p>
            <p> 项目简介：我的个人主页</p>
            <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              使用<strong> vue-quill-editor </strong>搭建富文本编辑器实现文章的添加；</p>
            <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              使用<strong> 媒体查询 </strong>和<strong> rem </strong>进行移动端适配；</p>
            <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              使用<strong> css变量 </strong>和<strong> Animate.css库 </strong>和进行一些效果的展示；</p>
            <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              使用<strong> socket.io </strong>和<strong> vue-socket库 </strong>完成了一个简易的聊天室。</p>
          </li>
        </ul>
      </section>
      <section class="others">
        <h2>其他链接(<span style='font-size: 16px;color:gray'>链接无法点击时可手动输入</span>)</h2>
        <ul>
          <li><a href="http://www.duwanyu.com"
               target="_blank">
              我的主页：</a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            http://www.duwanyu.com</li>
          <li><a href="https://juejin.cn/user/4099422807393901/posts"
               target="_blank">
              我的博客：</a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            https://juejin.cn/user/4099422807393901/posts</li>
          <li><a href="https://github.com/alanhzw"
               target="_blank">
              我的 GitHub：</a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            https://github.com/alanhzw</li>
          <li><a href="http://warbler.duwanyu.com"
               target="_blank">
              流莺书签在线预览：</a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
            http://warbler.duwanyu.com</li>
          <li><a href="http://warblerjs.duwanyu.com"
               target="_blank">
              warlber-js文档：</a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            http://warblerjs.duwanyu.com</li>
        </ul>
      </section>
      <section class="education">
        <h2>教育经历</h2>
        <p> <span><time>2016年</time>~<time>2020年</time></span> 大连大学 软件工程专业 本科</p>
      </section>
    </article>
  </body>

</html>